<template>
 
    <div class="second_level_page conversion_record_page">
      
        <div class=" record_box"  >
            
            <v-scroll1 class="conversion_record_scroll" :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" style="margin-top:-2.5rem;">
                <ul v-for="(voucher,index) in voucherlist" >
                    <li>
                        <div class="dw clear">
                            <div  class="left">
                                <h2><em>￥</em>{{parseInt(voucher.deductAmount)}}</h2>
                                <p>{{voucherType(voucher.voucherClass,voucher.voucherType)}}</p>
                            </div>
                            <div v-on:click="details(voucher.voucherCode,voucher.id,voucher.receiveSellerId,voucher.exchangeFlag)" class="right">
                                <h2>{{voucher.voucherName}}</h2>
                            </div>
                            <div v-if="(voucher.voucherType==1&&voucher.exchangeFlag==0)"  @click="bindVoucher(voucher, index)"  class="btn color_a" >激活绑定</div>
                            <div v-if="(voucher.voucherType==2&&voucher.receiveSellerId!=0&&voucher.exchangeFlag==0)"class="btn color_b" @click="showValidate(voucher.voucherCode)" >查看凭证</div>
                            <div  v-if="(voucher.voucherType==2&&voucher.receiveSellerId==0)" class="btn color_c" @click="toExchange(voucher.voucherCode)">领取兑换</div>
                            <div  v-if="(voucher.voucherType==2&&voucher.receiveSellerId!=0&&voucher.exchangeFlag==1)" class="text color_e">已领取</div>
                            <div v-if="(voucher.voucherType==1&&voucher.exchangeFlag==1)" style="background:#d2d2d2;width:4.5rem;" class="btn color_c" >结束日期 {{new Date(voucher.endTime).getFullYear()
                                    }}/
                                    {{parseMonth(new Date(voucher.endTime).getMonth()+1)
                                    }}/
                                    {{parseDay(new Date(voucher.endTime).getDate())
                                    }}&nbsp
                                    {{parseHour(new Date(voucher.endTime).getHours())
                                    }}:
                                    {{parseMin(new Date(voucher.endTime).getMinutes())
                                    }}:
                                    {{parsesec(new Date(voucher.endTime).getSeconds())
                                    }}</div>
                        
                        </div>
                    </li>
                   
                </ul> 
            </v-scroll1>

            <div v-if="Object.keys(voucherlist).length == 0" class="no_data">
                <img src="../../images/no_data.png" alt="">
            </div> 

        </div>
          <!-- </scroll>  -->
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition> 
        <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
        <confirm-model v-if="showConfirm" @cancel="showConfirm = false;" @confirm="confirmDos()" :confirmText="confirmText"></confirm-model>

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>
    </div>
  
</template>

<script>
    import alertTip from 'src/components/common/alertTip'
    import confirmModel from 'src/components/common/confirmModel'
    import { getMemberVouvherRecord,bindVoucher } from 'src/service/getData'
    import {mapState,mapMutations} from 'vuex'
    import Scroll1 from 'src/components/common/pulldown';
    import loading from 'src/components/common/loading'

    export default {
        data (){
            return{
                loadingText:'加载中……',
                start : 1, // 开始页数
                end : 10, // 结束页数
                temporaryVoucherList:[],
                voucherlist:[],
                memberId:null,
                showAlert: false, //显示提示组件
                alertText: null, //提示的内容
                confirmText: '',
                showConfirm: false,
                currentVoucher: '',
                currentIndex: '',
                showLoading: true, //显示加载动画
            }
        },
        created(){
           // this.loadRefreshData();
        },
        mounted(){
            this.token  = this.userInfo.token;
            this.$el.querySelector('.load-more').style.display = 'block';
            this.memberId  = this.userInfo.id;
            this.getVoucher();           
        },
        computed:{
             ...mapState([
                'userInfo'
            ]),
             
        },
        components: {
            'v-scroll1':Scroll1,
            alertTip,
            confirmModel,
            loading,
        },
        methods: {
            voucherType(param,voucherType){
                if(voucherType==1){//提货去
                    let index = param.substring(0,1);
                    if(index == 1){
                        return '全场通用'
                    }else{
                        return '指定仓库'
                    }  
                } else if(voucherType==2) {//门票
                    return '全场通用'
                }               
            },
            parseInt(num){
                var nums = num.split(".");
                if(nums.length==2)
                {
                    return nums[0]
                }else
                {
                    return num;
                }
             
            },
            parseMonth(num){
               
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseDay(num){
               
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseHour(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parseMin(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },
            parsesec(num){
                if(num<10)
                {
                    return "0"+num
                }
                else
                {
                    return num
                }
            },

         
             //初始化
            init(){
                this.loadingText="";
                this.$el.querySelector('.load-more').style.display = 'block';
                this.temporaryVoucherList = [];
                this.voucherlist=[];
                this.start=1;
                this.end=10;
            },
            showValidate(voucherCode){
                this.$router.push({path:'/showValidate', query:{voucherCode:voucherCode}});
            },
            toExchange(voucherCode){
                this.$router.push({path:'/voucherSellers', query:{voucherCode:voucherCode,index:1}});
            },
              //详情
            details(voucherCode,exchangeVoucherId,receiveSellerId,exchangeFlag){
                this.$router.push({path:'/voucherDetail', query:{voucherCode:voucherCode,exchangeVoucherId:exchangeVoucherId,receiveSellerId:receiveSellerId,exchangeFlag:exchangeFlag,index:2,}});
            },
            //我的兑换记录
            async getVoucher(){
                console.log(new Date().getTime());
                if (this.userInfo && this.userInfo.id) {
                    let data = await getMemberVouvherRecord(this.token, this.memberId,this.start,this.end);
                    this.temporaryVoucherList =  data.data;
                    this.voucherlist = this.voucherlist.concat(this.temporaryVoucherList);
                    if(this.temporaryVoucherList.length<10)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                     this.temporaryVoucherList=[];
                }

                

                this.showLoading = false;

            },
            //激活绑定
            bindVoucher(voucher, index){
                this.currentVoucher = voucher;
                this.currentIndex = index;
                this.showConfirm = true;
                this.confirmText = '确定现在要激活绑定吗？';
            },
            async confirmDos(){
                this.showConfirm = false;
                let data = await bindVoucher(this.token, this.currentVoucher.memberId, this.currentVoucher.voucherCode, this.currentVoucher.exchangeCode);

                console.log(data);
                if(data.resultCode==200){
                    this.voucherlist[this.currentIndex].exchangeFlag=1;
                    this.voucherlist[this.currentIndex].endTime=data.data.endTime;
                }else{
                    this.showAlert = true;
                    this.alertText = data.resultMessage;
                }
            },
            async  onRefresh(done) {
              
                
               this.init();
             
                let data = await getMemberVouvherRecord(this.token, this.memberId,this.start,this.end);
                this.temporaryVoucherList =  data.data;
                this.voucherlist = this.voucherlist.concat(this.temporaryVoucherList);
                if(this.temporaryVoucherList.length<10)
                {
                    this.$el.querySelector('.load-more').style.display = 'none';
                }
                this.temporaryVoucherList =[];
              
                done() // call done
            },
            //上拉加载，
            async onInfinite(done){

                this.loadingText='加载中……';
                this.start = this.voucherlist.length+1;
                this.end = this.start+10-1;
                let data = await getMemberVouvherRecord(this.token, this.memberId,this.start,this.end);
                this.temporaryVoucherList =  data.data;
                    this.voucherlist = this.voucherlist.concat(this.temporaryVoucherList);
                    if(this.temporaryVoucherList.length<10)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                         this.loadingText="------";
                    }
                this.temporaryVoucherList=[];
                done() // call done
            },
        }
    }
</script>

<style type="text/css">
    .conversion_record_scroll .inner{
        padding-bottom: .22rem;
    }
</style>
<style lang="scss" scoped>
.wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.conversion_record_scroll{margin-top: -2.5rem!important; left: .14rem; right: .14rem;}
span , em , i{font-style:normal;}
.record_box ul{margin-top: .22rem;}
.record_box ul li{border-radius:.05rem;position:relative; background: url(../../images/record_bg.png) no-repeat; background-size: 100% 100%; width: 100%; height: 2.34rem; }
.record_box img{width:100%;}
.record_box ul li .dw{position:absolute;width:100%;height:100%;top:0;left:0;font-size:.24rem;}
.record_box ul li .dw .left{width:2rem;text-align: center;margin-top:.5rem;}
.record_box ul li .dw .left h2{font-size:.6rem;color:#ffa101;}
.record_box ul li .dw .left h2 em{font-size:.4rem;}
.record_box ul li .dw .left p{margin-top:.24rem;color:#ffa101;}
.record_box ul li .dw .right{
    -webkit-width:calc(100% - 2.8rem);
    -moz-width:calc(100% - 2.8rem);
    -o-width:calc(100% - 2.8rem);
    width:calc(100% - 2.8rem);
    position:absolute;
    right:.2rem;
    top:.48rem;
    height:50%;
}
.record_box ul li .dw .right h2{font-size:.28rem;color:#333;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.record_box ul li .dw .btn{position:absolute;bottom:.4rem;right:.2rem;border-radius:.05rem; line-height:.54rem;width:1.7rem;text-align: center;color:#fff ;index:99;}
.record_box ul li .dw .text{position:absolute;bottom:.4rem;right:.3rem;line-height:.54rem;index:99;}
.color_a{background:#fd7e61;}
.color_b{background:#8fcd7a;}
.color_c{background:#ffa101;}
.color_d{color:#fd7e61;}
.color_e{color:#ffa101;}
.no_data{
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-align: center; 
    padding-top: 3.5rem; 
    background: #f4f4f4; 
    z-index: 10;
    img{
        width: 1.88rem;
        height: 2.6rem;
    }
}
</style>
